<!--
Copyright (c) 2019, salesforce.com, inc.
All rights reserved.
SPDX-License-Identifier: BSD-3-Clause
For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
-->
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget, JSUnresolvedVariable -->
<style type="text/css">
</style>
<head>
    <script type="text/javascript">
        document.write("<base href='/" + window.location.pathname.split('/')[1] + "/' />");
    </script>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Sloop{{if (ne .CurrentContext "")}} - {{.CurrentContext}}{{end}}</title>
    <link rel="stylesheet" type="text/css" href="webfiles/sloop.css">
    <link rel='shortcut icon' type='image/x-icon' href='webfiles/favicon.ico'/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
</head>

<body>
<div style="display: flex; width:100%; height:100%">
    <div id="sloopleftnav" class="sloopleftnav">
        <span style="font-size:20px">Sloop v0.2</span><br>
        <span style="font-size:12px">Kubernetes History Visualization</span><br><br>
{{if (ne .CurrentContext "")}}
        <label for="currentContext">Kubernetes Context:</label><br/>
        <input type="text" id="currentContext" value="{{.CurrentContext}}" disabled="true"><br><br>
{{end}}
        <form action="" method="get">
            <!-- Not showing the query drop down as we only have one query at the moment -->
            <!-- <label for="filterquery">Query:</label><br /> -->
            <select name="query" id="filterquery" hidden="true"> </select>
            <!-- <br><br> -->

            <label for="selectedEndTime">End Time:</label><br/>
            <div>
                <input type="datetime-local" step="1" id="selectedEndTime" name="selectedEndTime" />
                <input type="button" value="Now" name="now" id="now">
            </div><br>


            <label for="filterlookback">Look Back Range:</label><br/>
            <select name="lookback" id="filterlookback">
                <option value="1h">1 Hour</option>
                <option value="3h">3 Hours</option>
                <option value="6h">6 Hours</option>
                <option value="12h">12 Hours</option>
                <option value="24h">1 Day</option>
                <option value="168h">1 Week</option>
                <option value="336h">2 Weeks</option>
            </select><br><br>

            <label for="filternamespace">Filter Namespace:</label><br/>
            <select name="namespace" id="filternamespace">
            </select>
            <br><br>

            <label for="filterkind">Filter Kind: </label><br/>
            <select id="filterkind" name="kind">
            </select><br><br>

            <label for="filtersort">Sort:</label><br>
            <select name="sort" id="filtersort">
                <option value="starttime">Start Time</option>
                <option value="mostevents">Most Events</option>
                <option value="name">Name</option>
            </select><br><br>

            <label for="filternamematch">Name Filter:</label><br>
            <input type="text" name="namematch" id="filternamematch"><br><br>

            <input type="submit">
        </form>
        <!-- Toggle switch to show payload changes -->
        <div class="switch-container">
            <p id="payloadText">Show Payload Changes</p>
            <label class="switch"> 
                <input type="checkbox" id="payloadCheck" onchange="payloadChecker()" checked>
                <span class="slider round"></span>
            </label>
        </div>
   
        <br><br>

        <h2>Links</h2>
        <a href="debug/">Sloop Debug Menu</a><br/>
        <a href="" id="datafilelink">Data File For This Query</a><br/>
        <a href="https://github.com/salesforce/sloop" target="_blank">Source Code on GitHub</a><br/>
{{range .LeftBarLinks}}
        <a href="{{.Url}}" target="_blank">{{.Text}}</a><br/>
{{end}}

    </div>
    <div id="d3_here" class="svg-container" style='width: 100%; height:100%;'>

    </div>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>

    <!-- This is the list of scripts needed by resource.html, because inner html can not use includes -->
    <script src="https://unpkg.com/axios/dist/axios.min.js" async="" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" async="" type="text/javascript"></script>
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js" async="" type="text/javascript"></script>
    <script src="https://cemerick.github.io/jsdifflib/diffview.js" type="text/javascript" ></script>
    <script src="https://cemerick.github.io/jsdifflib/difflib.js" type="text/javascript" ></script>

    <script src="webfiles/filter.js"></script>
    <script>
        // When we reload the page this will set the correct selections for the drop-downs based on passed in parameters
        dataQueryUrl = setFiltersAndReturnQueryUrl("{{.DefaultLookback}}", "{{.DefaultKind}}", "{{.DefaultNamespace}}");
        document.getElementById("datafilelink").href = dataQueryUrl;
    </script>
    <script src="webfiles/sloop_ui.js"></script>
    </div>
</body>
